<template>
  <div>
    <el-table class="table" :data="tableData.list" style="width: 100%" height="500px" @selection-change="tableData.selectFn">
      <el-table-column v-for="item in columnData" :type="item?.type" :prop="(item.property as string)" :label="item.label"
        :width="item.width" align="center" :fixed="item.fixed">
        <!-- 自定义表头 -->
        <template v-if="item?.customHeader" #header>
          <slot :name="item.customHeader"></slot>
        </template>

        <!-- 自定义表内内容 -->
        <template v-if="item?.customData" #default="scope">
          <slot :name="item.customData" :rowData="scope"></slot>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-if="tableData.needPaging" :total="tableData.paging?.total"
      :current-page="tableData.paging?.currentPage" :page-size="10" layout="prev, pager, next, jumper"
      @current-change="tableData.paging?.changeFn" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { columnDataType, tableDataType } from '@/components/table/index.d'

const props = defineProps<{
  columnData: columnDataType<any>[]
  tableData: tableDataType<any>
}>()


</script>


<style scoped lang="scss">
.table{
  border: 1px solid #eee;
}
.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
</style>